<template>
    <div class="config-box">
        <!-- <topTitle title="大神局各段位价格配置" style="padding-left: 15px;"/>
        <div class="config-item">
            <div class="config-option">
                <span class="option-title">青铜-铂金：</span>
                <span class="input-txt" v-if="!editPos">{{ '黄金' }}<i class="el-icon-edit"  v-if="!editPos" @click="editPos = true"></i></span>
                <el-select v-model="value1" size="mini" v-else style="width: 100px;" @change="positionChange" placeholder="请选择">
                    <el-option v-for="(item, index) in identityList" :key="index" :label="item.label" :value="item.value"></el-option>
                </el-select>
                <i class="el-icon-success" v-if="editPos" @click="identitySave"></i>
                <i class="el-icon-error" v-if="editPos" @click="identityCancel"></i>
            </div>
            <div class="config-option">
                <span class="option-title">钻石-星耀：</span>
                <span class="input-txt" v-if="!editPos">{{ '黄金' }}<i class="el-icon-edit"  v-if="!editPos" @click="editPos = true"></i></span>
                <el-select v-model="value1" size="mini" v-else style="width: 100px;" @change="positionChange" placeholder="请选择">
                    <el-option v-for="(item, index) in identityList" :key="index" :label="item.label" :value="item.value"></el-option>
                </el-select>
                <i class="el-icon-success" v-if="editPos" @click="identitySave"></i>
                <i class="el-icon-error" v-if="editPos" @click="identityCancel"></i>
            </div>
            <div class="config-option">
                <span class="option-title">王者0-25</span>
                <span class="input-txt" v-if="!editPos">{{ '黄金' }}<i class="el-icon-edit"  v-if="!editPos" @click="editPos = true"></i></span>
                <el-select v-model="value1" size="mini" v-else style="width: 100px;" @change="positionChange" placeholder="请选择">
                    <el-option v-for="(item, index) in identityList" :key="index" :label="item.label" :value="item.value"></el-option>
                </el-select>
                <i class="el-icon-success" v-if="editPos" @click="identitySave"></i>
                <i class="el-icon-error" v-if="editPos" @click="identityCancel"></i>
            </div>
            <div class="config-option">
                <span class="option-title">王者26-50</span>
                <span class="input-txt" v-if="!editPos">{{ '黄金' }}<i class="el-icon-edit"  v-if="!editPos" @click="editPos = true"></i></span>
                <el-input v-else @keyup.enter.native="selectChange" size="mini" v-model.trim="value1" placeholder="请选择" style="width: 100px;"></el-input>
                <i class="el-icon-success" v-if="editPos" @click="identitySave"></i>
                <i class="el-icon-error" v-if="editPos" @click="identityCancel"></i>
            </div>
        </div>

        <topTitle title="申请大神的初级门槛" style="padding-left: 15px;"/>
        <div class="config-item">
            <div class="config-option">
                <p class="option-title">队长</p>
                <el-switch v-model="value1" @change="val => { configChange(val, 1) }"></el-switch>
                <p class="option-tips">tips：队长补贴开关关闭，平台将暂停对所有队长补贴，不会影响对陪玩队长的补贴开关设置</p>
            </div>
            <div class="config-option">
                <span class="option-title">队长等级：</span>
                <span class="input-txt" v-if="!editPos">{{ '黄金' }}<i class="el-icon-edit"  v-if="!editPos" @click="editPos = true"></i></span>
                <el-select v-model="value1" size="mini" v-else style="width: 100px;" @change="positionChange" placeholder="请选择">
                    <el-option v-for="(item, index) in identityList" :key="index" :label="item.label" :value="item.value"></el-option>
                </el-select>
                <i class="el-icon-success" v-if="editPos" @click="identitySave"></i>
                <i class="el-icon-error" v-if="editPos" @click="identityCancel"></i>
            </div>
            <div class="config-option">
                <span class="option-title">好评率：</span>
                <span class="input-txt" v-if="!editPos">{{ '黄金' }}<i class="el-icon-edit"  v-if="!editPos" @click="editPos = true"></i></span>
                <el-select v-model="value1" size="mini" v-else style="width: 100px;" @change="positionChange" placeholder="请选择">
                    <el-option v-for="(item, index) in identityList" :key="index" :label="item.label" :value="item.value"></el-option>
                </el-select>
                <i class="el-icon-success" v-if="editPos" @click="identitySave"></i>
                <i class="el-icon-error" v-if="editPos" @click="identityCancel"></i>
            </div>
            <div class="config-option">
                <span class="option-title">普通场对局数：</span>
                <span class="input-txt" v-if="!editPos">{{ '黄金' }}<i class="el-icon-edit"  v-if="!editPos" @click="editPos = true"></i></span>
                <el-select v-model="value1" size="mini" v-else style="width: 100px;" @change="positionChange" placeholder="请选择">
                    <el-option v-for="(item, index) in identityList" :key="index" :label="item.label" :value="item.value"></el-option>
                </el-select>
                <i class="el-icon-success" v-if="editPos" @click="identitySave"></i>
                <i class="el-icon-error" v-if="editPos" @click="identityCancel"></i>
            </div>
        </div>

        <topTitle title="考核期重新成为大神条件" style="padding-left: 15px;"/>
        <div class="config-item">
            <div class="config-option">
                <p class="option-title">队长</p>
                <el-switch v-model="value1" @change="val => { configChange(val, 1) }"></el-switch>
                <p class="option-tips">tips：队长补贴开关关闭，平台将暂停对所有队长补贴，不会影响对陪玩队长的补贴开关设置</p>
            </div>
            <div class="config-option">
                <p class="option-title">队长等级</p>
                <el-switch v-model="value1" @change="val => { configChange(val, 1) }"></el-switch>
                <p class="option-tips">tips：队长补贴开关关闭，平台将暂停对所有队长补贴，不会影响对陪玩队长的补贴开关设置</p>
            </div>
            <div class="config-option">
                <span class="option-title">普通场好评率：</span>
                <span class="input-txt" v-if="!editPos">{{ '黄金' }}<i class="el-icon-edit"  v-if="!editPos" @click="editPos = true"></i></span>
                <el-select v-model="value1" size="mini" v-else style="width: 100px;" @change="positionChange" placeholder="请选择">
                    <el-option v-for="(item, index) in identityList" :key="index" :label="item.label" :value="item.value"></el-option>
                </el-select>
                <i class="el-icon-success" v-if="editPos" @click="identitySave"></i>
                <i class="el-icon-error" v-if="editPos" @click="identityCancel"></i>
            </div>
            <div class="config-option">
                <span class="option-title">对局数：</span>
                <span class="input-txt" v-if="!editPos">{{ '黄金' }}<i class="el-icon-edit"  v-if="!editPos" @click="editPos = true"></i></span>
                <el-select v-model="value1" size="mini" v-else style="width: 100px;" @change="positionChange" placeholder="请选择">
                    <el-option v-for="(item, index) in identityList" :key="index" :label="item.label" :value="item.value"></el-option>
                </el-select>
                <i class="el-icon-success" v-if="editPos" @click="identitySave"></i>
                <i class="el-icon-error" v-if="editPos" @click="identityCancel"></i>
            </div>
        </div> -->

        <topTitle title="补贴配置" style="padding-left: 15px;"/>
        <div class="config-item">
            <div class="config-option">
                <p class="option-title">队长补贴</p>
                <el-switch v-model="value1" @change="val => { configChange(val, 1) }"></el-switch>
                <p class="option-tips">tips：队长补贴开关关闭，平台将暂停对所有队长补贴，不会影响对陪玩队长的补贴开关设置</p>
            </div>
            <div class="config-option">
                <p class="option-title">队员补贴</p>
                <el-switch v-model="value2" @change="val => { configChange(val, 2) }"></el-switch>
                <p class="option-tips">tips：队员补贴开关关闭，通过平台发出的陪玩推送组队将不会获得补贴</p>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'config',
    props: {
        tabIndex: ''
    },
    data () {
        return {
            value1: '',
            value2: '',
            identityList: [],
            editPos: false
        }
    },
    watch: {
        tabIndex: function (val) {
            if (val === '3') {
                this.getConfig(1)
                this.getConfig(2)
            }
        }
    },
    methods: {
        getConfig (type) {
            this.$http.post('/team/selectAllOpenReward', { type }).then(res => {
                if (res.code === '0') {
                    if (type === 1) {
                        this.value1 = !!parseInt(res.data)
                    } else {
                        this.value2 = !!parseInt(res.data)
                    }
                } else {
                    this.$message({
                        type: 'error',
                        message: '系统异常，请稍后再试'
                    })
                }
            }).catch(() => {
                this.$message({
                    type: 'error',
                    message: '系统异常，请稍后再试'
                })
            })
        },
        configChange (val, type) {
            let params = {
                type,
                status: val ? '1' : '0'
            }
            this.$http.post('/team/updateAllOpenReward', params).then(res => {
                if (res.code === '0') {
                    this.$message({
                        type: 'success',
                        message: '修改成功'
                    })
                }
            }).catch(() => {
                this.$message({
                    type: 'error',
                    message: '系统异常，请稍后再试'
                })
            })
        }
    }
}
</script>

<style lang="scss">
    .config-box {
        padding-top: 20px;
        .config-item {
            margin-top: 30px;
            margin-bottom: 30px;
            .config-option {
                display: flex;
                align-items: center;
                margin-bottom: 20px;
                padding-left: 26px;
                color: #9B9A9A;
                .option-title {
                    width: 100px;
                    margin-right: 60px;
                    font-size: 14px;
                }
                .option-tips {
                    margin-left: 35px;
                    font-size: 12px;
                }
                .input-title {
                    margin-left: 20px;
                }
                .input-txt {
                    font-size: 12px;
                    color: rgba($color: #000000, $alpha: 0.6);
                }
                .btn {
                    margin-top: 10px;
                    margin-left: 10px;
                }
                i {
                    margin-left: 5px;
                    font-size: 14px;
                    color: #409EFF;
                    cursor: pointer;
                }
            }
        }
    }
</style>
